<template>
  <div>
    <div style="position: absolute; width: calc(100% - 50px)" >
      <div class="el-select ddd" slot="reference" @click="$emit('click')">
        <span>
          <el-input ref="ElementInput" v-if="multiple" :clearable="clearable" @clear.prevent="onClear"> </el-input>
          <el-input v-else :value="singleDisplayValue" :clearable="clearable" @clear.prevent="onClear"></el-input>
        </span>

        <div class="el-select__tags" style="width: 100%" ref="container" v-if="multiple">
          <span>
            <el-tag
              :size="size"
              type="info"
              :key="item.value"
              v-for="item in selected"
              closable
              :disable-transitions="false"
              @close="onRemoveItem(item)"
            >
              {{ item.label }}
            </el-tag>
          </span>
        </div>
      </div>
      <div class="ddd aaa" style="z-index: -99999; overflow-x: clip;">
        <slot></slot>
      </div>
    </div>
    <div style="position: absolute; right: 0px">
      <i
        slot="suffix"
        class="el-icon-date"
        @click.stop="$event=>iconClick($event,'icon1Click')"
      ></i>
      <i
        slot="suffix"
        class="el-icon-date"
        @click.stop="$event=>iconClick($event,'icon2Click')"
      ></i>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "ConbinationValueInput",
  components: {},
  props: {
    value: {
      type: Array,
      required: true,
    },
    size: {
      type: String,
      default: () => 'mini',
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  provide() {},
  data() {
    return {
      originInputHeight: null,
      inputWidth: null,
    };
  },
  computed: {
    selected () {
      return this.value;
    },
    singleDisplayValue() {
      if (this.value && this.value.length > 0) {
        return this.value[0].label;
      }
      return '';
    },
  },
  mounted() {
    let erd = elementResizeDetectorMaker();
    const el = this.$refs.container;
    if (!el) {
      return;
    }
    erd.listenTo(el, this.containerSizeChanged);
    this.originInputHeight = this.$refs.ElementInput.$el.offsetHeight;
    this.inputWidth = el.offsetWidth;
  },
  methods: {
    onRemoveItem(item){
      this.$emit('removeItem', item);
    },
    iconClick($event, name) {
      console.log($event);
      this.$emit(name)
    },
    containerSizeChanged(element) {
      if (!this.$refs.ElementInput) {
        return;
      }
      const elements = [this.$refs.ElementInput];
      let height;
      if (element.offsetHeight > this.originInputHeight) {
        height = `${element.offsetHeight + 4}px`;
      } else {
        height = `${this.originInputHeight}px`;
      }
      elements.forEach((el) => {
        el.$refs.input.style.height = height;
      });
    },
  },
};
</script>
  <style scoped>
.ddd {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
}
</style>
  <style>
.aaa > div {
  position: absolute;
  left: 0px;
}
</style>
